<template>
    <div v-loading="loading" class="hot-article">
        <div class="flex flex-between public-exchange">
            <h3>热门文章</h3>
            <span @click="changeBatch">换一批</span>
        </div>
        <div v-for="(haitem) in list" :key="haitem.id" class="ha-content flex">
            <div class="ha-l">
                <nuxt-link :to="`/community/article/detail/${haitem.id}`">
                    <img :src="coverImgUrl + haitem.blogNewImg.fileShowUrl + `?x-oss-process=image/resize,w_${95}`" alt="">
                </nuxt-link>
            </div>
            <div class="ha-r">
                <nuxt-link :to="`/community/article/detail/${haitem.id}`">
                    {{FILTER_FORMATER.wordNum(haitem.title, 10)}}
                </nuxt-link>
                <p>{{(haitem.createDate).substring(0, 10)}}</p>
            </div>
        </div>
        <div v-if="list && list.length === 0" class="f-no-data">
            <i class="i-no-data icon icon-no-data"></i>
            <p>暂无数据</p>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component
} from 'nuxt-property-decorator'
import {HotArticleListApi} from '~/api/community/article/index'
@Component({
    name: 'test',
    components: {}
})
export default class PageArticleList extends Vue {
    loading: boolean = false
    coverImgUrl: string = this.$store.state.basefile
    params: any = {
        pageNumber: 1,
        pageSize: 5
    }
    total: number = 0
    list: any = []
    async articleListFn () {
        this.loading = true
        const {data}: any = await HotArticleListApi(this.params)
        if (data.code >= 0) {
            this.loading = false
            this.list = data.data.content
            this.total = data.data.totalElements
        }
    }
    changeBatch () {
        if (this.params.pageNumber < Math.ceil(this.total / this.params.pageSize)) {
            this.params.pageNumber += 1
            this.articleListFn()
        } else {
            this.params.pageNumber = 1
            this.articleListFn()
        }
    }
    mounted () {
        this.articleListFn()
    }
}
</script>

<style lang="scss" scoped>
    @import "../../../assets/sass/mixin";
    .hot-article{
        padding: 0 20px;
        background: #fff;
    }
.ha-content{
    padding: 15px 0;
    border-bottom: 1px solid #f3f5f7;
    .ha-l{
        position: relative;
        margin-right: 15px;
        img{
            /*@include imgCenter;
            max-width: 85%;
            min-height: 50%;*/
            display: block;
            width: 95px;
            height: 70px;
            /*background: red;*/
            cursor: pointer;
        }
    }
    .ha-r{
        font-size: 14px;
        a{
            display: block;
            min-height: 40px;
            color: #333;
            &:hover{
                color: #11a9e8;
            }
        }
        p{
            padding-top: 10px;
            color: #999;
        }
    }
}
</style>
